<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线帮助(Web)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            padding: 15px;
            max-width: 600px;
            margin: 0 auto;
            background-color: #f5f5f5;
        }
        /* 表单标签页样式 */
        .tab-header {
            display: flex;
            background-color: #fff;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tab-btn {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            background-color: #f8f8f8;
            border: none;
            outline: none;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            color: #666;
        }
        .tab-btn.active {
            background-color: #fff;
            color: #1890ff;
            font-weight: bold;
            position: relative;
        }
        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #1890ff;
            border-radius: 3px;
        }
        .tab-content {
            display: none;
            background-color: #fff;
            padding: 20px;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tab-content.active {
            display: block;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .form-control:focus {
            border-color: #1890ff;
            outline: none;
        }
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        select.form-control {
            height: 40px;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 1em;
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .submit-btn:hover {
            background-color: #40a9ff;
        }
        
        /* 导航按钮标签页样式 - 全新设计为一列，文字居中，颜色与提交按钮相似，高度调小 */
        .nav-tabs {
            display: flex;
            flex-direction: column; /* 保持一列布局 */
            gap: 16px; /* 增大按钮之间的间距到16px */
            margin-top: 20px;
            background-color: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .nav-tab {
            width: 100%;
            padding: 10px 15px; /* 减小内边距使按钮高度变小 */
            text-align: center; /* 文字居中显示 */
            background-color: #1890ff; /* 与提交按钮相同的背景色 */
            border: none; /* 移除边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer;
            transition: all 0.3s;
            font-size: 15px;
            color: white; /* 文字颜色为白色 */
            text-decoration: none;
            font-weight: 500;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            display: block; /* 确保按钮占满整行 */
        }
        .nav-tab:hover {
            background-color: #40a9ff; /* 悬停时颜色变亮 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transform: translateY(-1px);
        }
        
        /* 最后一个导航按钮与底部的间隔加大6px */
        .nav-tabs .nav-tab:last-child {
            margin-bottom: 6px; /* 增加底部间隔 */
        }
        
        /* 二维码弹窗样式 */
        .qrcode-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
        .qrcode-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .qrcode-img {
            max-width: 200px;
            max-height: 200px;
        }
        
        /* 响应显示区域 */
        .response-area {
            margin-top: 15px;
            padding: 10px;
            background-color: #f8f8f8;
            border-radius: 4px;
            font-size: 14px;
            word-break: break-all;
            display: none;
        }
        .red-id {
            color: red;
            font-weight: bold;
        }
        
        /* 填写技巧提示框样式 */
        .tips-btn {
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
            margin-bottom: 10px;
            margin-right: 15px;
        }
        .tips-btn:hover {
            background-color: #40a9ff;
        }
        
        /* 填写技巧提示内容 */
        .tips-content {
            display: none;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tips-content h4 {
            margin-bottom: 10px;
            color: #333;
        }
        .tips-content p {
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 表单标签页 -->
    <div id="formTabs">
        <div class="tab-header">
            <button class="tab-btn active" data-tab="form1">便捷输入框</button>
            <button class="tab-btn" data-tab="form2">帮助页面</button>
        </div>

        <div id="form1" class="tab-content active">
            <div class="form-group">
                <label class="form-label">常用词</label>
                <select class="form-control" id="optionSelect">
                    <option value="">--快速选择(常用词)--</option>
                    <option value="捕/鱼/大咖/鱼乐/达人/三人行/老六/乡村/狠小志">快手捕鱼(20250622)</option>
                    <option value="下单/支付/包邮/购物/去看直播/直播中/抢购/购买/旗舰店/专卖店/个体店/企业店/小店/包邮/热卖/卖货/立抢/爆款/如何省钱/直播间告诉你/实惠价格/点击进入直播/退货/运费/严选/坏了包/已售.+件/破损/无理由/包退/晚发/立赔">快手购物(20250622)</option>
                    <option value="爆款游戏.*捕鱼大咖/捕鱼大咖.*爆款游戏/老六.*捕鱼大咖">快手指定捕鱼(20250622)</option>
                    <option value="跳转微信/点我玩玩/试玩游戏/立即试玩/试玩一下/点击即玩/去玩游戏/点击立玩/跳转游戏/小游戏/无需下载/无需安装/短剧/剧场/新剧/免费观看/热播剧/下一集/立即观看/继续观看/观看全集/观看更多/几集/题材/剧情/免费看视频/抢先看/看全集/超级汇/珠海小叮当/点击额外获取.+金币">快手讨厌词(20250622)</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">词组内容</label>
                <textarea class="form-control" id="detailInput" placeholder="请填写内容"></textarea>
            </div>
            <!-- 填写技巧提示按钮 -->
            <button class="tips-btn" onclick="toggleTips()">正规则技巧</button>
            <button class="tips-btn" onclick="toggleScriptTips()">已支持输入框</button>
            <div class="tips-content" id="tipsContent">
                <h4>正则表达式</h4>
                <p>爆款.+游戏   或   爆款.*游戏</p>
                <p>以上".+"表示这两个字中间肯定有其它文字，数量与文字不清楚</p>
                <p>以上".*"表示这两个字中间可能有或可能没有文字</p>
            </div>
            <div class="tips-content" id="scriptTipsContent">
                <h4>脚本已支持的输入框</h4>
                <p>快手喜欢关键词输入框</p>
                <p>快手讨厌关键词输入框</p>
                 <p>Spt密钥输入框、卡密编号输入框</p>
            </div>
            <button class="submit-btn">生成输入框ID</button>
            <div class="response-area" id="responseArea">
                <!-- API响应将显示在这里 -->
            </div>
        </div>

        <div id="form2" class="tab-content">
            <!-- 导航页面内容 - 使用新的简洁一列布局，文字居中，颜色与提交按钮相似，高度调小 -->
            <div class="nav-tabs">
                <div class="nav-tab" onclick="navigateTo('https://gitee.com/sutcok/faq/issues/ICBTVH')">❓疑难杂症(脚本问题)</div>
                <div class="nav-tab" style="display: none;" onclick="navigateTo('https://gitee.com/sutcok/chao/blob/master/ee.png')">💥微信群(扫码点我)</div>
                <div class="nav-tab" onclick="navigateTo('https://www.123865.com/s/YHB7Vv-6vBsA')">123云盘资源</div>
                <div class="nav-tab" onclick="navigateTo('https://share.feijipan.com/s/dDGrC7rQ')">下载脚本(飞机盘)</div>
                <div class="nav-tab" onclick="navigateTo('https://www.wenshushu.cn')">文叔叔(临时上传)</div>
                <div class="nav-tab" onclick="navigateTo('https://gitee.com/sutcok/chao/releases/tag/online')">🕵️‍在线设备数据(当天)</div>
                <div class="nav-tab" onclick="navigateTo('https://gitee.com/sutcok/chao/releases/tag/top')">🏆高手金币排行榜(当天)</div>
                <div class="nav-tab" onclick="navigateTo('https://wxpusher.zjiecode.com/api/qrcode/RwjGLMOPTYp35zSYQr0HxbCPrV9eU0wKVBXU1D5VVtya0cQXEJWPjqBdW3gKLifS.jpg')">在线申请Spt密钥(微通知)</div>
            </div>
        </div>
    </div>

    <script>
        function getQueryParam(param) {
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            return urlParams.get(param);
        }

        // 页面加载完成后执行
        window.onload = function() {
            const tabParam = getQueryParam('tab');
            if (tabParam) {
                if (tabParam === '1') {
                    // 激活便捷输入框标签页
                    document.querySelector('[data-tab="form1"]').click();
                } else if (tabParam === '2') {
                    // 激活帮助页面标签页
                    document.querySelector('[data-tab="form2"]').click();
                }
                // 其他值不做处理，保持默认第一个标签页
            }
            // 如果tab参数不存在，保持默认第一个标签页(已有功能)
        };

        // 添加Base64编码函数
        function base64Encode(str) {
            return btoa(unescape(encodeURIComponent(str)));
        }

        // 表单标签页切换
        document.querySelectorAll('#formTabs .tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有active类
                document.querySelectorAll('#formTabs .tab-btn').forEach(b => b.classList.remove('active'));
                document.querySelectorAll('#formTabs .tab-content').forEach(c => c.classList.remove('active'));
                
                // 添加active类到当前按钮和对应内容
                this.classList.add('active');
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 表单一：当选择下拉框选项后，将值填充到文本输入框
        document.getElementById('optionSelect').addEventListener('change', function() {
            const selectedValue = this.value;
            if (selectedValue) {
                document.getElementById('detailInput').value = selectedValue;
            }
        });
        
        // 表单一：生成输入框ID按钮功能 - 提交数据到API（添加base64编码）
        document.querySelector('#form1 .submit-btn').addEventListener('click', function() {
            let detailText = document.getElementById('detailInput').value;
            
            if (!detailText.trim()) {
                alert('请填写词组内容');
                return;
            }
            
            // 对数据进行base64编码
            const encodedData = base64Encode(detailText);
            
            // 构造请求参数（使用编码后的数据）
            const requestData = {
                access_token: "6c16d5a3652c95cb7ecfa7a442d48308",
                body: encodedData  // 使用编码后的数据
            };
            
            // 发送POST请求到API
            fetch('https://gitee.com/api/v5/repos/sutcok/yun/issues/ID7ZO8/comments', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => {
                // 提取id值并在响应区域显示，按照指定格式，ID用红色字体显示
                const id = data.id;
                document.getElementById('responseArea').innerHTML = `生成输入框ID成功，ID为：<span class="red-id">${id}</span><br>请把ID复制到或填写进脚本输入框即可;`;
                document.getElementById('responseArea').style.display = 'block';
            })
            .catch(error => {
                document.getElementById('responseArea').innerHTML = `请求失败: ${error.message}`;
                document.getElementById('responseArea').style.display = 'block';
                console.error('Error:', error);
            });
        });
        
        // 导航函数
        function navigateTo(url) {
            window.open(url, '_blank');
        }
        
        // 填写技巧提示框显示/隐藏功能
        function toggleTips() {
            const tipsContent = document.getElementById('tipsContent');
            if (tipsContent.style.display === 'block') {
                tipsContent.style.display = 'none';
            } else {
                tipsContent.style.display = 'block';
                document.getElementById('scriptTipsContent').style.display = 'none';
            }
        }
        
        // 脚本输入框提示框显示/隐藏功能
        function toggleScriptTips() {
            const scriptTipsContent = document.getElementById('scriptTipsContent');
            if (scriptTipsContent.style.display === 'block') {
                scriptTipsContent.style.display = 'none';
            } else {
                scriptTipsContent.style.display = 'block';
                document.getElementById('tipsContent').style.display = 'none';
            }
        }
    </script>
</body>
</html>
